• chromium: View Report (✅ 506 / ❌ 0 / ⚠️ 4 / ⏭️ 8)
• chromium-2x: View Report (✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
• chromium-0.5x: View Report (✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
• mobile-chrome: View Report (✅ 9 / ❌ 0 / ⚠️ 0 / ⏭️ 0)

Walkthrough

The SettingDialog.vue component now includes auto-scroll and highlight functionality. When a target setting is specified, the component waits for the correct category to render, then scrolls to and highlights the target element with a pulsing animation that respects motion preferences before cleanup on unmount.

Changes

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop to the setting, a highlight so keen,
With a pulse and a glow, the smoothest you've seen,
The dialog now knows just where you should go,
Auto-scroll magic makes preferences flow,
And when motion's too much, respect what's been blessed!

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

src/platform/settings/components/SettingDialog.vue (1)

227-247: Unscoped <style> block — justified but worth noting.

The coding guidelines say to avoid <style> blocks in favor of Tailwind. Here, CSS @keyframes can't be expressed as Tailwind utilities, and the style must be unscoped because the target element is rendered by a child component (SettingsPanel). This is a reasonable exception.

Consider whether --p-primary-color (a PrimeVue CSS variable) will remain stable if the project migrates away from PrimeVue theming. If a semantic design token already exists (e.g., in style.css), that would be more resilient.

As per coding guidelines: "Use Tailwind 4 for styling in Vue components; avoid <style> blocks" and "Never use dark: Tailwind variant; use semantic values from style.css theme instead."

• X
• Mastodon
• Reddit
• LinkedIn